<template>
  <div>
    <!--<ul class="ul" @mouseenter="handleChangeStatusEnter" @mouseleave="handleChangeStatusLeave">-->
    <!--<li v-for="(item,index) in storeData">-->
    <!--{{index + 1}}-->
    <!--&lt;!&ndash;<span class="name" :class="{bgColor: index == selIndex}">{{item.name}}</span>&ndash;&gt;-->

    <!--<span class="name" :class="{active:item.checked}">{{item.name}}</span>-->
    <!--<el-checkbox :value="item.checked" @change="handleCheckChange"></el-checkbox>-->

    <!--<span @click="handleTop(index)">置顶</span>-->
    <!--</li>-->

    <!--</ul>-->
    <!--<div class="hidden" v-if="hidden">-->

    <!--</div>-->

    <ul
      class="ul"
      @mouseenter="handleChangeStatusEnter"
      @mouseleave="handleChangeStatusLeave"
    >
      <li v-for="(item,index) in storeData">
        <!--<span class="name" :class="{bgColor: index == selIndex}">{{item.name}}</span>-->
        <span
          class="name"
          :class="{bgColor:selArr.indexOf(item.name) != -1}"
        >{{item.name}}</span>
        <el-checkbox
          :label="item.id"
          v-model="selArr"
          @change="checked => handleStatus(checked, item)"
        >{{item.name}}</el-checkbox>
        <span @click="handleTop(index)">置顶</span>
      </li>
    </ul>
    已经勾选的列表项id:{{selArr}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      hidden: false,

      storeData: [],
      selArr: [],
      idArr: []
    };
  },
  created() {
    this.getAllData();
  },
  methods: {
    getAllData() {
      const list = [
        { id: 1, name: "zhangsan" },
        { id: 2, name: "lishi" },
        { id: 3, name: "wanwu" }
      ];
      const data = list.map(el => {
        console.log(el);
        el.checked = false;
        console.log(el.checked);
        return el;
      });
      this.storeData = data;
    },

    handleChangeStatusEnter() {
      this.hidden = true;
    },

    handleChangeStatusLeave() {
      this.hidden = false;
    },

    /**
     *  一键置顶
     * @param index
     */

    handleTop(index) {
      const item = this.list[index];
      this.list.splice(index, 1);
      this.list.unshift(item);
    },
    handleStatus(checked, item) {
      if (checked) {
        this.idArr.push(item.id);
      } else {
        this.idArr.splice(this.idArr.indexOf(item.id), 1);
      }
      console.log(this.idArr);
    }
  }
};
</script>

<style scoped>
.ul {
  border: 1px solid grey;
}
.hidden {
  width: 100px;
  height: 30px;
  background: cadetblue;
}
.name {
  width: 100px;
  height: 30px;
  border: 1px solid grey;
  border-radius: 5px;
  background-color: #9e9e9e;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  margin-bottom: 10px;
}
.name.active {
  background-color: red;
}
.checkbox {
  position: relative;
  left: -20px;
}
.bgColor {
  background-color: red;
}
</style>
